<template> 
  <h1>个人信息</h1>
    姓: <input type="text" v-model="person.firstName"> <br>
    名: <input type="text" v-model="person.lasttName"> <br>
    全名: {{person.fullName}} <br>
    全名: <input type="text" v-model="person.fullName">
</template>

<script>  
import {reactive, computed} from 'vue'
export default {
  name: 'Demo',  
  setup() {  
    let person = reactive({
      firstName: '张',
      lasttName: '三', 
    })  
    // 计算属性简写形式
    // person.fullName = computed(() => {
    //   return person.firstName + '-' + person.lasttName
    // })

    // 计算属性完整形式
    person.fullName = computed({
      get(){
        return person.firstName + '-' + person.lasttName
      },
      set(value){
        const nameArr = value.split('-')
        person.firstName = nameArr[0]
        person.lasttName = nameArr[1]
      }
    })
// 返回一个对象 (常用)
    return {
      person 
    } 
  }
}
</script>

